import React, { Component } from "react";
// import { createPortal } from "react-dom";

import styled from "styled-components";
import PropTypes from "prop-types";
import withPortal from "./withPortal";

const Shadow = styled.div`
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  .center {
    width: ${(props) => props.width + "px"};
    background-color: #fff;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    padding: 20px;

    h4 {
      margin: 0;
    }
    p {
      margin: 0;
    }
    footer {
      width: 100%;
      height: 50px;
      margin-top: 20px;
      display: flex;
      justify-content: end;
      align-items: center;

      button {
        margin: 0 10px;
      }
    }
  }
`;

// 我们想要封装的对话框组件
class Modal extends Component {
  // 设置默认值
  static defaultProps = {
    width: 520,
    cancelText: "取消",
    okText: "确定",
  };
  // 设置数据类型
  static propTypes = {
    open: PropTypes.bool.isRequired,
    title: PropTypes.string.isRequired,
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    cancelText: PropTypes.string,
    okText: PropTypes.string,
  };

  render() {
    return (
      this.props.open && (
        <Shadow width={this.props.width}>
          <div className="center">
            <h3>{this.props.title}</h3>
            <main>{this.props.children}</main>
            <footer>
              <button onClick={this.props.onCancel}>
                {this.props.cancelText}
              </button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </footer>
          </div>
        </Shadow>
      )
    );
  }
}

export default withPortal(Modal);
